<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title></title>
  <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
  
  <!-- Extra Codiqa features -->
  <link rel="stylesheet" href="codiqa.ext.css">
  
  <!-- jQuery and jQuery Mobile -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
  <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <!-- Extra Codiqa features -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=fr"></script>
  <script>
    var map;
    var locVelib = null
    var infowindowPrec = null

    $(function(){
        $("#carte").height($(window).height()*0.8);
        initialize();
        setTimeout("update_getInfosStations", 10000);
    });
    var marker = null;
    
    function initialize() {
        marker = null;
        //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
        //de définir des options d'affichage de notre carte
        var options = {
            center: new google.maps.LatLng(48.858565, 2.347198),
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        if (navigator.geolocation)
            var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
        else
            alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");    
 
        function successCallback(position){
            map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
            if(marker==null){
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
                    map: map
                });
            }
            else{
                var newPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                marker.setPosition(newPosition);

            }
        }

        update_getInfosStations();

        map = new google.maps.Map(document.getElementById("carte"), options);
        
        
    }
    
    function update_getInfosStations(){
        $.getJSON('../app/ajax/ajax_getInfosStations.php', function(data) {
            var myMarkerImage = null;
            $.each(data, function(i, item) {  
                myMarkerImage=myMarkerImage=new google.maps.MarkerImage('../assets/images/picto_normal_medium.gif');
                var myWindowOptions = {
                    content:'Adresse :<br/>'+item.StationAddress+'<br/>Nb vélos disponible : '+item.AvailableBikes+'<br/>Nb places libre : '+item.AvailableBikeStands+'<br/>Dernière mise à jour : '+ item.LastUpdate
                } 
                var infowindow = new google.maps.InfoWindow(myWindowOptions);
                if(item.Bonus){
                    myMarkerImage=new google.maps.MarkerImage('../assets/images/picto_start_medium2.gif');
                }
                if($("#toggleswitch1").val()=='on'&&item.AvailableBikes>0){
                    var markerVelo = new google.maps.Marker({
                        position: new google.maps.LatLng(item.StationLatitude, item.StationLongitude),
                        map: map,
                        title: item.StationAddress,
                        icon: myMarkerImage
                    });
                    google.maps.event.addListener(markerVelo, 'click', function() {
                        if(infowindowPrec!=null)
                                infowindowPrec.close();
                        infowindow.open(map,markerVelo);
                        infowindowPrec=infowindow;
                    });
                }
                if($("#toggleswitch1").val()=='off'&&item.AvailableBikeStands>0){
                    var markerVelo = new google.maps.Marker({
                        position: new google.maps.LatLng(item.StationLatitude, item.StationLongitude),
                        map: map,
                        title: item.StationAddress,
                        icon: myMarkerImage
                    });
                    google.maps.event.addListener(markerVelo, 'click', function() {
                        if(infowindowPrec!=null)
                                infowindowPrec.close();
                        infowindow.open(map,markerVelo);
                        infowindowPrec=infowindow;
                    });
                }
            });

        });
    }
  </script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <h3>
            EasyLib
        </h3>
        <div data-role="fieldcontain">
            <select name="toggleswitch1" id="toggleswitch1" data-theme="" data-role="slider" onchange="initialize()">
                <option value="off">
                    Rendre
                </option>
                <option value="on">
                    Prendre
                </option>
            </select>
        </div>
    </div>
    <div data-role="content">
        <div id="carte" style="width:100%"></div>
    </div>
</div>
</body>
</html>
